<template>
    <div class="box">
        <!-- <video-player :style="{ height: data.data[0].height + 'px' }" v-if="data.data.length > 0" ref="videoPlayer"
            class="video-player" :playsinline="true" :options="playerOptions"></video-player> -->

        <video :src="data.data[0].url" :style="{ height: data.data[0].height + 'px' }" v-if="data.data.length > 0"
            class="video-player" controls></video>

        <div v-else>
            <div class="image-null"><span class="el-icon-picture"></span></div>
        </div>

    </div>
</template>

<script>
export default {
    props: {

        data: {
            type: Object,
            default: () => { },
        },
    },
    data() {
        return {
            playerOptions: {
                height: "300px",
                autoplay: true,
                controls: true,
                sources: [
                    {
                        type: "video/mp4",
                        src: "",
                    },
                ],
            },
        }
    },
    watch: {
        data: {
            handler(newData, oldData) {
                // 检查 tabType 是否发生了变化
                if (this.data.data.length > 0) {
                    this.playerOptions.sources[0].src = this.data.data[0].url
                    this.playerOptions.height = this.data.data[0].height + 'px'
                    this.playerOptions.autoplay = this.data.autoplay
                    this.playerOptions.loop = this.data.loop
                    this.playerOptions.muted = this.data.muted
                    this.playerOptions.controls = this.data.controls
                }
            },
            // 开启深度监听
            deep: true,
        },
    },
    mounted() {
        console.log(this.data.data)
    }
}
</script>

<style lang="scss" scoped>
.image-null {
    background: #ffffff;
    height: 200px;
    font-size: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c1c1c1;
    width: 100%;
}

.box {
    padding: 10px;

    .video-player {
        width: 100% !important;
        height: 300px;

        ::v-deep .video-js {
            width: 100% !important;
            height: 100%;
        }
    }
}
</style>